<template>

  <n-layout has-sider position="absolute">

    <n-layout-sider
        collapse-mode="transform"
        :collapsed-width="0"
        :collapsed="isCollapsed"
        :width="220"
        :show-collapsed-content="false"
        content-style="padding: 10px;"
        bordered
        :native-scrollbar="false"
        :position="position"
    >
      <MenuBarTemplate />
    </n-layout-sider>
    <n-layout>
      <n-layout-header style="padding: 10px">
        <n-button size="medium" tertiary circle @click="this.isCollapsed=!this.isCollapsed">
          <template #icon>
            <n-icon>
              <i :class="'fa fa-'+(isCollapsed?'indent':'dedent') " />
            </n-icon>
          </template>
        </n-button>
        <TabPageTemplate />
      </n-layout-header>
      <n-layout-content content-style="padding:0 10px;" position="absolute" style="top: 55px">
        <router-view name="content" />
        <UserMessageTemplate />
      </n-layout-content>

    </n-layout>
  </n-layout>

</template>

<script>
import MenuBarTemplate from "@/components/Index/MenuBarTemplate";
import TabPageTemplate from "@/components/Index/TabPageTemplate";
import UserMessageTemplate from "@/components/Index/UserMessageTemplate";
export default {
  name: "IndexTemplate",
  components: {UserMessageTemplate, TabPageTemplate, MenuBarTemplate},
  data(){
    return{
      position:'static',
      isCollapsed:false
    }
  },
  mounted() {
    if (window.innerWidth < 1080) {
      this.isCollapsed=true;
    }
  }
}
</script>

<style scoped>
  .n-layout-header{
    display: flex;
  }
</style>